<script setup lang="ts">
import { provide, onMounted } from 'vue'
import { useDesigner } from './DesignerRuntime'
import { WidgetInjectionKey } from './core/WidgetProtocol'
import { LegacyAdapter } from './compat/LegacyAdapter'

const engine = useDesigner()

// 初始化旧组件适配
onMounted(() => {
  LegacyAdapter.registerLegacyWidgets()
})

// 提供设计器上下文
provide('designer-engine', engine)
</script>

<template>
  <div class="designer-root">
    <!-- 顶部工具栏 -->
    <div class="designer-toolbar">
      <slot name="toolbar">
        <!-- 默认工具栏内容 -->
      </slot>
    </div>

    <!-- 主工作区 -->
    <div class="designer-workspace">
      <!-- 组件面板 -->
      <div class="designer-widget-panel">
        <slot name="widget-panel"></slot>
      </div>

      <!-- 画布区 -->
      <div class="designer-canvas">
        <slot name="canvas"></slot>
      </div>

      <!-- 属性面板 -->
      <div class="designer-property-panel">
        <slot name="property-panel"></slot>
      </div>
    </div>
  </div>
</template>

<style scoped>
.designer-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.designer-toolbar {
  height: 48px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.designer-workspace {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.designer-widget-panel {
  width: 240px;
  border-right: 1px solid #ddd;
}

.designer-canvas {
  flex: 1;
  overflow: auto;
  background: #f9f9f9;
}

.designer-property-panel {
  width: 300px;
  border-left: 1px solid #ddd;
}
</style>